<template>
  <a-modal
    :title="title"
    :visible="dialogVisible"
    @cancel="cancel"
    @ok="sumbitForm"
    :confirm-loading="isSubmitting"
		>
    <div class="dialog-content">
			<a-form-model
			:model="form"
			ref="form"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
			:rules="rules"
      >
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="姓名" prop="name">
              <a-input v-model="form.name" placeholder="请输入姓名" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="年龄" prop="age">
              <a-input-number v-model="form.age" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="性别" prop="gender">
              <a-radio-group v-model="form.gender">
                <a-radio value="0"> 男 </a-radio>
                <a-radio value="1"> 女 </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </a-modal>
</template>

<script>
import { sleep } from '@/utils'
const genderOptions = [
  {
    label: '男',
    value: '0'
  },
  {
    label: '女',
    value: '1'
  }
]
export default {
  name: 'AddOrEdit',
  components: {},
  props: {},
  data() {
    return {
      labelCol: {
        span: 3
      },
      wrapperCol: {
        span: 21
      },
      isSubmitting: false,
      dialogVisible: false,
      title: '',
      isAdd: false, // 用于判断是新增还是修改
      form: {},
      rules: {
        name: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 5,
            message: '长度为3-5个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
		console.log('add edit')
	},
  mounted() {},
  methods: {
    init(data) {
      if (data) {
        this.title = '编辑'
        this.isAdd = false
        this.dialogVisible = true
        this.$nextTick(() => {
          this.reset()
          // todo
        })
      } else {
        this.title = '新增'
        this.isAdd = true
        this.dialogVisible = true
        this.$nextTick(() => {
          this.reset()
          // todo
        })
      }
    },
    cancel() {
      this.dialogVisible = false
    },
    formatGender(val) {
      return genderOptions.find(item => item.value === val)?.label
    },
    reset() {
      this.form = {
        name: '',
        age: '',
        gender: '0'
      }
      this.$refs['form'].resetFields()
    },
    sumbitForm() {
      this.$refs['form'].validate(async valid => {
        if (valid) {
          if (this.isAdd) {
            // 新增
            if (this.isSubmitting) return
            this.isSubmitting = true
            try {
              // 请求
              await sleep(3000) // todo 模拟请求
              this.isSubmitting = false
              this.dialogVisible = false
              this.$message.success('操作成功')
              this.$emit('on-operate', true)
            } catch (error) {
              console.log('error', error)
              this.isSubmitting = false
            }
          } else {
            // 编辑
            if (this.isSubmitting) return
            this.isSubmitting = true
            try {
              // 请求
              await sleep(3000) // todo 模拟请求
              this.isSubmitting = false
              this.dialogVisible = false
              this.$message.success('操作成功')
              this.$emit('on-operate', true)
            } catch (error) {
              console.log('error', error)
              this.isSubmitting = false
            }
          }
          console.log('success')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  filters: {}
}
</script>
<style scoped lang="less"></style>
